<template>
  <div class="access-module">
    <div class="access-list" v-if="accessList.length > 0">
      <Row :gutter="10" v-for="access in accessList" :key="access.id">
        <Col span="6">
          <div class="flex">
            <div class="flex-name">名称&nbsp;&nbsp;</div>
            <div class="flex-1">
              <Input v-model="access.id" :readonly="true"></Input>
            </div>
          </div>
        </Col>
        <Col span="12">
          <div class="flex">
            <div class="flex-name">域名&nbsp;&nbsp;</div>
            <div class="flex-1">
              <Input v-model="access.host" :readonly="true"></Input>
            </div>
          </div>
        </Col>
        <Col span="2">
          <Icon type="ios-remove-circle-outline" class="remove-icon" @click="removeAccess(access)"></Icon>
        </Col>
      </Row>
    </div>
    <Button type="primary" size="small" class="f-w70" @click="addAccessMani" v-if="accessList.length === 0">
      <Icon type="ios-add"></Icon>添加
    </Button>

    <add-access-modal :visible.sync="accessVisible" :form="form" @finish="accessFinish"></add-access-modal>
  </div>
</template>
<script type="text/javascript">
import AddAccessModal from '@/components/access-right/add-modify-model'
import uuid from 'uuid/v4'

export default {
  components: {
    AddAccessModal
  },
  data() {
    return {
      accessVisible: false,
      form: {}
    }
  },
  props: {
    serviceName: {
      default: '',
      type: String
    },
    ports: {
      type: Array,
      default: function () {
        return []
      }
    },
    accessList: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  methods: {
    // 移除访问权
    removeAccess(access) {
      this.$emit('accessAddMinus', {
        add: false,
        access: access
      })
    },
    // 完成访问权新增
    accessFinish(access) {
      this.$emit('accessAddMinus', {
        add: true,
        access: access
      })
    },
    // 打开新增访问权弹窗
    addAccessMani() {
      if (!this.serviceName) {
        this.$Message.info({
          content: '请先填写服务名称!',
          duration: this.DURATION
        })
        return
      }

      let port = '80'
      if (this.ports.length > 0) {
        port = this.ports[0].port
      }
      this.form = {
        isService: true,
        environmentName: '',
        id: this.serviceName,
        host: this.serviceName + '.' + localStorage.getItem('secondaryDomain') + '.' + localStorage.getItem('domain'),
        maxBodySize: '8',
        level3domen: this.serviceName,
        paths: [{id: uuid(), path: '/', serviceId: this.serviceName, servicePort: port}]
      }
      this.accessVisible = true
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.access-module {
  .access-cont {
    font-size: 14px;
    vertical-align: middle;
    margin-right: 10px;
  }
}
.access-list {
  margin-top: -3px;
  > div {
    margin-bottom: 10px;
  }
}
.add-icon-button {
  display: inline-block;
  vertical-align: top;
  margin-top: 8px;
  margin-right: 5px;
}
.add-icon {
  display: inline-block;
  margin-right: 10px;
  font-size: 20px;
  color: #3ea9f5;
  cursor: pointer;
}
</style>
